
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
           <title>How to use - Fancy fields</title>      
<meta name="description" content="This page will instruct you how to use Fancy fields to design your custom forms in your web page. few little steps and you&#39;re done!"/>
 <meta name="keywords" content="Fancy fields,how to use" />
    <link rel="stylesheet" href="/css/general.css" />
	<link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Crete+Round' rel='stylesheet' type='text/css'>
    <!--[if lt IE 9]>
	<script src="/scripts/html5shiv.js"></script>
    <![endif]-->
   
	<!--<script type="text/javascript" src="/scripts/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="/scripts/jquery-ui-1.9.0.custom.min.js"></script>-->
	  
	<script type="text/javascript" src="/scripts/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="/scripts/jquery-ui-1.10.2.custom.min.js"></script>  
	  
	<script type="text/javascript" src="/scripts/common.js"></script> 
	<!--<script type="text/javascript" src="/scripts/fancyfields/fancyfields_1.01_beta.min.js"></script>-->
	<script type="text/javascript" src="/scripts/fancyfields/fancyfields-1.2.min.js"></script>
	<script type="text/javascript" src="/scripts/fancyfields/fancyfields.csb.min.js"></script>
	<link rel="stylesheet" href="/scripts/fancyfields/fancyfields.css" />

 
    

	  
	<script type="text/javascript" >
		$(document).ready(function(){
			$('.sidebar').fancyfields();
			$(".donateSelect").fancyfields("bind" , "onSelectChange",function(input , text , val){
				if (val=="0"){
					$("#ppA").remove();
				}
				else{
					if ($("#ppA").length > 0)
					{
						$("#ppA").val(val);	
					}
					else{
						$("#ppF").append('<input id="ppA" type="hidden" name="amount" value="'+val+'">');
					}
					
				}
			});
		});
		
	
	</script>

	

	
	


	 
	  
	  
	<script type="text/javascript">var switchTo5x=true;</script>
	<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
	<script type="text/javascript">stLight.options({publisher: "ur-c89db432-19d2-eea4-bd89-beea2ed9e864"});</script>
	  
	<script type="text/javascript">
	
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-35530605-1']);
	  _gaq.push(['_trackPageview']);
	
	  (function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
	
	</script>
	  
  </head>

<!-- Body - write in macro -->




<body>
	<a href="https://github.com/giladk/fancy-fields"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
    <header>
		<a href="/"><img src="/images/logo.png" alt="Fancy Fields - open source jquery plugin" width="198" height="40" class="logo" /></a>
      <div class="social">
        <span class='st_facebook_vcount' displayText='Facebook'></span>
        <span class='st_twitter_vcount' displayText='Tweet'></span>
        <span class='st_googleplus_vcount' displayText='Google +'></span>
        <span class="tellYourFriends">Tell your friends</span>
      </div>

    </header>
    <nav class="clearfix">
     	

		<ul>
			
			<li>
				<a href="/">Home page</a>
			</li>
			
			<li>
				<a class="active" href="/how-to-use/">How to use</a>
			</li>
			<li>
				<a href="/examples-docs/">Examples &amp; Docs</a>
			</li>
			<li>
				<a href="/themes/">Themes</a>
			</li>
			<li>
				<a href="/contact-us/">Contact us</a>
			</li>
		</ul>

    </nav>
    
    <section class="contentWrapper clearfix">
      
      
    
	
	   <section class="mainContent">
        
					<h1>How to use</H1>


        
	<div class="howtouse">
<h2>Step 1: Download the Fancy fields kit</h2>
<p>The first step is to <a href="https://github.com/giladk/fancy-fields" target="_blank" title="Download fancy fields">download</a> the latest version of Fancy fields.</p>
<h2>Step 2: add the Fancy fields library to your project</h2>
<ul>
<li>Put fancyfields folder into your javascript project folder.</li>
<li>Add fancyfields.js file and jQuery libary to your tag:
<p class="code">&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;<br />&lt;script type="text/javascript" src="path/to/file/fancyfields.js"&gt;&lt;/script&gt;</p>
</li>
</ul>
<h2>Step 3: Add the CSS file to the document &lt;head&gt; tag</h2>
<p>To get the basic theme of fancy fields plugin you have to reference the CSS file in the &lt;head&gt; like so:</p>
<p class="code">&lt;link rel="stylesheet" href="path/to/file/fancyfields.css" /&gt;</p>
<h2>Step 4: trigger the script to run</h2>
<p>After you added the fancy fields library to the site it's all ready to work. The last step for making fancy fields to run is to trigger the area of the script to work on.</p>
<p>To do this you need to add the following code to the document ready:</p>
<p class="code">$('#myForm').fancyfields();</p>
<p>Every form element in a div with ID "myForm" will be transformed to a styled form element.</p>
<h2>That's all. Enjoy Fancy fields!</h2>
<p>Now you should have nice designed form elements on your site.</p>
</div>


        

      </section>

      <section class="sidebar">
        
	    <!--	<div class="subscribe clearfix">
          <h3>Stay up to date</h3>
          <p>Fill in your email address and be the first to know.</p>
			<input type="text" id="subName" class="subscribeInput" value="Name" />
			<span class="errorMsg">* Name is required</span>
          	<input type="text" id="subMail" class="subscribeInput" value="E-Mail" />
			<span class="errorMsg">* Email is not valid</span>
			<input type="button" value="Subscribe" />
			<div class="clear"></div>
        </div>   -->
		  
        <div class="donation">
          <h2>Want to help us<br />keep running?<span>Buy us a beer:</span></h2>
          <select class="donateSelect">
            <option value="5">5$</option>
            <option value="10">10$</option>
            <option value="15">15$</option>
            <option value="0">Other amount</option>
          </select>
          <br />
			<br />
	<form id="ppF" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="jqfancyfields@gmail.com">
<input type="hidden" name="lc" value="GB">
<input type="hidden" name="item_name" value="Fancy Fields">
<input type="hidden" name="no_note" value="0">
<input id="ppA" type="hidden" name="amount" value="5">		
<input type="hidden" name="currency_code" value="USD">
		
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>


  
			<img src="/images/beer.png" alt="but us a beer" class="beer" />
        </div>



      </section>


 
      
      
 

    </section>

    <footer>
      <span class="footerTick"></span>
      <div class="innerFooter"></div>

      <div class="credit">Copyright &copy; 2012 FancyFields. All right reserved</div>
    </footer>

  </body>
</html> 
  
  
  
  
  
  
